import React, { memo, useEffect } from 'react'
import { useDispatch, useSelector, shallowEqual } from 'react-redux'
import { getTopBannersAction } from './store'

const recommend = memo(function Recommend(props) {
  const { TopBanners } = useSelector(state => ({ TopBanners: state.get('recommend').get('topBanners') }), shallowEqual)
  console.log(TopBanners, '2222222222222222222')
  const dispatch = useDispatch()
  useEffect(() => {
    dispatch(getTopBannersAction())
  }, [dispatch])

  return (
    <div>
      <h2>Recommend</h2>
    </div>
  )
})
export default recommend

// const recommend = memo(function Recommend(props) {
//   useEffect(() => {
//     props.getTopBanner([1, 2, 3])
//   }, [])

//   return (
//     <div>
//       {props.TopBanners.length}
//       <h2>Recommend</h2>
//     </div>
//   )
// })
// const mapStateToProps = state => ({ TopBanners: state.recommend.topBanners })
// const mapDispatchToProps = dispatch => {
//   return {
//     changeTopBanners: function (payload) {
//       dispatch(changTopBannerAction(payload))
//     },
//     getTopBanner: function (params) {
//       dispatch(getTopBannersAction(params))
//     },
//   }
// }

// export default connect(mapStateToProps, mapDispatchToProps)(recommend)
